作品四：服务端渲染门户（工业 SSR）
在线体验
一、定位与价值
| 视角 | 说明 |
|---|---|
| SEO | 行业门户、专题页需要 首屏 HTML 可被爬虫索引 |
| 首屏 | Node 侧渲染首屏，缩短 FCP/LCP（仍受接口与水合策略影响） |
| 业务 | 工业物联网场景：设备 / 产线 / 告警 等内容站与接口并存 |
对应仓库：projects/server-render（Nuxt 前端应用 + NestJS API）。
二、技术架构
text
用户请求 /server-render/*
↓
Nginx → Nuxt SSR（Node）
↓ useFetch / server route
NestJS（/api-server-render/*）
↓
MySQL 等业务库- SSR：
ServerRender相关页面在服务端拉取数据并输出 HTML；客户端 hydration 接管交互。 - API 前缀：
api-server-render，与 Compose / Nginx upstream 一致。 - WebSocket：大屏类实时能力可走
/server-render-socket.io/（与网关配置一致）。
三、技术栈
| 层级 | 选型 |
|---|---|
| 前端框架 | Nuxt 3、Vue 3、TypeScript |
| BFF / API | NestJS（REST + 可选 Socket） |
| 部署 | Nuxt Node 容器；静态 chunk 走 /_nuxt/，适合 长缓存 |
四、工程要点（多维）
| 维度 | 说明 |
|---|---|
| 同构 | 避免在服务端直接使用 window/document；环境判断封装 |
| 数据 | useFetch、useAsyncData 与缓存键设计；错误边界与降级 CSR |
| 运维 | Node 进程监控、内存与 SSR 超时；与纯静态站点相比 运维成本更高 |
| 安全 | XSS 过滤、Cookie 策略、HTTPS 终端 |
五、与 SPA / SSG 的选型对比（常见辨析）
| 形态 | 优点 | 成本 |
|---|---|---|
| CSR SPA | 部署简单 | SEO 弱、首屏依赖 JS |
| SSG | 最快静态交付 | 动态数据需构建期或客户端补拉 |
| SSR | SEO + 首屏 HTML | Node 运行时、缓存与水合复杂度高 |